<template>
	<page-meta>
	    <navigation-bar
	      title="手机验证"
	      front-color="#ffffff"
	      background-color="#046ef6"
	    />
	  </page-meta>
	<view>
		<!-- #ifdef APP-PLUS || H5-->
		<view v-if="platform==='ios'&&!isNvue" class="uni-form-item uni-column">
		    <view class="title"><text class="uni-form-item__title">密码</text></view>
		    <view class="uni-input-wrapper">
		        <input class="uni-input" placeholder="请输入您的密码" password @focus="onFocus" @blur="onBlur"  v-model="query.pass"/>
		    </view>
		</view>
		<view class="uni-form-item uni-column" v-else>
		    <view class="title"><text class="uni-form-item__title">密码</text></view>
		    <view class="uni-input-wrapper">
		        <input class="uni-input"  placeholder="请输入您的密码" password v-model="query.pass"/>
		    </view>
		</view>
		<!-- #endif -->
		<!-- #ifdef APP-PLUS || H5-->
		<view v-if="platform==='ios'&&!isNvue" class="uni-form-item uni-column">
		    <view class="title"><text class="uni-form-item__title">确认密码</text></view>
		    <view class="uni-input-wrapper">
		        <input class="uni-input" placeholder="再次输入您的密码" @focus="onFocus" password @blur="onBlur"  v-model="query.pass1"/>
		    </view>
		</view>
		<view class="uni-form-item uni-column" v-else>
		    <view class="title"><text class="uni-form-item__title">确认密码</text></view>
		    <view class="uni-input-wrapper">
		        <input class="uni-input"  placeholder="再次输入您的密码" password v-model="query.pass1"/>
		    </view>
		</view>
		<!-- #endif -->
		<button @tap="sub" style="width: calc(100% - 20px);display: block;margin: 0px 10px;margin-top: 60px;background: #046ef6;border-radius: 15px;color: #fff;" type="default">确定</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				platform: '',
				isNvue: false,
				query:{
					phone:'',
					code:'',
					pass:'',
					pass1:''
				}
			}
		},
		methods: {
			onFocus(idx) {
				this.idx = idx;
				// #ifdef APP-PLUS
				this.$mp.page.$getAppWebview().setStyle({
					softinputNavBar: 'none'
				});
				// #endif
			},
			onBlur() {
				// #ifdef APP-PLUS
				this.$mp.page.$getAppWebview().setStyle({
					softinputNavBar: 'auto'
				});
				// #endif
			},
			sub(){
				var pPattern = /^.*(?=.{6,})(?=.*\d)(?=.*[a-zA-Z]).*$/;
				if (!pPattern.test(this.query.pass)) {
					uni.showToast({
						title: '用户密码必须最少6位，包括至少1个大写字母或者1个小写字母，1个数字!',
						icon: 'none'
						// position:'top'
					});
					return;
				}
				if(this.query.pass != this.query.pass1){
					uni.showToast({
						title: '确认密码不一致！',
						icon: 'none'
						// position:'top'
					});
					return;
				}
				uni.request({
					url: this.$store.state.url+'/api/shequuser/login/add', //检查更新的服务器地址
					method: 'POST',
					data: JSON.stringify({
						faccount:this.query.phone,
						fpwd:this.query.pass,
						fcode:this.query.code
					}),
					success: res => {
						res = res.data;
						// console.log(res)
						if(res.code == 200){
							uni.showToast({
								title: '注册成功',
								icon: 'none'
								// position:'top'
							});
							setTimeout(function(){
								uni.navigateTo({
									url: '/pages/login/login'
								});
							},1500)
							
						}else{
							uni.showToast({
								title: res.msgs,
								icon: 'none'
								// position:'top'
							});
						}
					},
					fail: res => {
						console.log(res);
					}
				});
			}
				
		},
		onLoad(e) {
			this.query.phone = e.phone;
			this.query.code = e.code;
			this.platform = uni.getSystemInfoSync().platform;
			// #ifdef APP-PLUS-NVUE
			this.isNvue = true;
			// #endif
		},
	}
</script>

<style scoped>
	.uni-input:hover {
		border-bottom: 1px solid #007aff;
	}
.Toolssss,
.check {
	padding: 8px 12px;
	font-size: 14px;
}
.Toolssss > uni-text {
	float: left;
}

.Toolssss > uni-navigator {
	float: right;
}
.container {
	padding: 10upx;
}
.check {
	display: flex;
	flex-direction: row; /*这里可以不写，flex布局默认方向横向即row*/
	justify-content: center;
	align-items: center;
	margin-top: 15px;
}
.check lable {
	font-size: 15px;
}

.check lable span {
	width: 18px;
	height: 18px;
	display: block;
	float: left;
	background: #ccc;
	border-radius: 50%;
	margin-right: 5px;
	text-align: center;
	color: #fff;
}
.check lable span.active {
	background: #046ef6;
}
.check lable span.active::before {
	content: '✓';
	font-size: 12px;
}
.check > uni-navigator {
	color: #168dea;
	font-size: 15px;
}
.nvue-page-root {
	background-color: #f8f8f8;
	padding-bottom: 20px;
}

.page-title {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 35rpx;
}

.page-title__wrapper {
	padding: 0px 20px;
	border-bottom-color: #d8d8d8;
	border-bottom-width: 1px;
}

.page-title__text {
	font-size: 16px;
	height: 48px;
	line-height: 48px;
	color: #bebebe;
}

.title {
	padding: 0px 13px;
}
.uni-form-item {
	margin-top: 20px;
}
.uni-form-item__title {
	font-size: 16px;
	line-height: 24px;
}

.uni-input-wrapper {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	padding: 2px 13px;
	flex-direction: row;
	flex-wrap: nowrap;
	width: auto;
	background-color: #ffffff;
}

.uni-input {
	height: 45px;
	line-height: 45px;
	font-size: 15px;
	padding: 0px;
	flex: 1;
	background-color: #ffffff;
	border-bottom: 1px solid #eee;
}

.uni-icon {
	font-family: uniicons;
	font-size: 24px;
	font-weight: normal;
	font-style: normal;
	width: 24px;
	height: 24px;
	line-height: 24px;
	color: #999999;
}

.uni-eye-active {
	color: #007aff;
}
</style>
